<template>
    <div class="header">
        <div class="local-city">{{ localCity.city }}</div>
        <div class="three-frame">
            <el-input
            v-model="searchQuery"
            placeholder="请输入你所在的城市"
            class="search-input"
            :prefix-icon="Search" 
            clearable
            @keyup.enter="searchCity"
            @clear="handleClear"
            ></el-input>

            <el-select
            v-model="selectedOption1"
            placeholder="请选择绘制图形"
            class="graph-selected"
            >
                <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>

            <el-select
            v-model="selectedOption2"
            placeholder="选择标记类型"
            class="mark-selected"
            :disabled="receivedZoomChange"
            @click.native="handleSelectClick"
            >
                <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>

            <el-dialog
                v-model="dialogVisible"
                title="提示"
                width="30%"
                    >
            <span>当zoom大于13级的时候才能选择标记</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确定</el-button>
                </span>
            </template>
         </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted,watch } from 'vue';
import { getCityByIP,getAdcodeByCity } from '@/api/index.js';
import { Search } from '@element-plus/icons-vue'

const emit = defineEmits(['city-searched','draw-type-change','mark-type-change'])

const dialogVisible = ref(false)

//重置选择器状态的方法
const resetDrawType = () => {
    selectedOption1.value = '';
}

const resetMarkType = () => {
    selectedOption2.value = '';
}

defineExpose({
    resetDrawType,
    resetMarkType
})

const props = defineProps({
    receivedZoomChange:{
    type:Boolean,
    default:true,
    }
})

const localCity = ref({})
const searchQuery = ref('')
const selectedOption1 = ref('')
const selectedOption2 = ref('')

const options1 = ref([
    {value:'line',label:'直线'},
    {value:'circle',label:'圆形'},
    {value:'polygon',label:'多边形'},
    {value:'freedraw',label:'自由画笔'},
    {value:'clear',label:'清除绘图'},
])

const options2 = ref([
    {value:'chargeStation',label:'充电站'},
    {value:'busStation',label:'公交站'},
    {value:'parkStation',label:'停车场'},
    {value:'exit',label:'退出标记'},
])

//通过城市名得到adcode的方法-键盘事件（输入框）
const searchCity = async() => {
    if(!searchQuery.value.trim()) return;
    try {
        const geoRes = await getAdcodeByCity(searchQuery.value.trim());
        if(geoRes.geocodes && geoRes.geocodes.length > 0) {
            const adcode = geoRes.geocodes[0].adcode;
            emit('city-searched',adcode);
            // console.log('成功找到目标城市')
        } else {
            alert('未找到该城市');
        }
    } catch (error) {
        console.error('搜索城市失败：',error);
    }
}

//清空搜索框后回到本地城市
const handleClear = () => {
    searchQuery.value = '';
    emit('city-searched',null);
}

//改变绘图类型
const handleDrawTypeChange = (type) => {
    emit('draw-type-change',type);
    selectedOption2.value = '';//清空标记选择
};
//监听绘图选择变化
watch(() => selectedOption1.value,(newValue) =>{
    handleDrawTypeChange(newValue);
})

//改变标记类型
const handleMarkTypeChange = (type) => {
    emit('mark-type-change',type)
    selectedOption1.value = '';//清空绘图选择
}
//监听标记选择变化
watch(() => selectedOption2.value,(newValue) => {
    if(newValue === 'exit') {
        resetMarkType();
        handleMarkTypeChange(null);
    } else {
    handleMarkTypeChange(newValue);
    }
})

// 改变zoom时el-select2回位
// watch(() => props.receivedZoomChange, (disabled) => {
//   if (disabled && selectedOption2.value) {
//     resetMarkType();
//     emit('mark-type-change', null);
//   }
// });

//点击事件-禁用状态下的下拉框
const handleSelectClick = (event) => {
    // 如果是禁用状态，阻止默认行为并显示弹窗
    if (props.receivedZoomChange) {
        event.preventDefault(); 
        dialogVisible.value = true;
    }
};

onMounted(async() => {
    const res = await getCityByIP();
    localCity.value = res
})
</script>

<style lang="scss" scoped>
.header{
    display: flex;
    position: sticky;
    top: -1px;
    width: 100%;
    height: 60px;
    color: #fff;
    background-color: rgb(52, 84, 243);
    box-shadow: 0 3px 4px #304b5f;
    z-index: 999;
    .local-city{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        padding-left: 10px;
        font-size: 1.1rem;
    }
    .three-frame {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 100px;
        width: 730px;
        margin-left: 100px;
    }
}
</style>